<transition name="moves">
    <div v-show="writingFlag" class="add-info operate-way">
        <h4 class="app-title"><span @click="hideTable"><i class="icon-left back"></i></span>Demo效果</h4>
        <div class="init-width flex">
            <div id="table-wirting-wrapper" class="flex-1 flex flex-ac flex-jcc">
                <table cellpadding="0" cellspacing="0" id="table-drop-wirting" class="table unactive">
                    <tr v-for="item in snakeList">
                        <td v-for="itemSub in item">
                            <span :data-id="itemSub" class="writing-round"></span>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="writing-control">
                <div class="flex flex-m flex-jcc">
                    <span v-for="item in colorList" @click="selectColor(item)"
                          class="flex flex-ac flex-jcc" :style="{'background': item}">
                            <i v-show="currentRgb == item" class="icon-ok-circled"></i>
                        </span>
                    <span @click="writeWord(oneList, 0, true)" class="flex flex-ac flex-jcc text-info"
                          :class="{'active': currentWrite == 0}" :style="{'background': currentRgb}">乐</span>
                    <span @click="writeWord(twoList, 1, true)" class="flex flex-ac flex-jcc text-info"
                          :class="{'active': currentWrite == 1}" :style="{'background': currentRgb}">鑫</span>
                    <span @click="writeWord(threeList, 2, true)" class="flex flex-ac flex-jcc text-info"
                          :class="{'active': currentWrite == 2}" :style="{'background': currentRgb}">欢</span>
                    <span @click="writeWord(fourList, 3, true)" class="flex flex-ac flex-jcc text-info"
                          :class="{'active': currentWrite == 3}" :style="{'background': currentRgb}">迎</span>
                    <span @click="writeWord(fiveList, 4, true)" class="flex flex-ac flex-jcc text-info"
                          :class="{'active': currentWrite == 4}" :style="{'background': currentRgb}">您</span>
                    <span @click="writeCycle(5)"  class="flex flex-ac flex-jcc text-info"
                          :class="{'active': currentWrite == 5}" :style="{'background': currentRgb}">循环</span>
                    <span @click="cycleLight(6)" class="flex flex-ac flex-jcc text-info"
                          :class="{'active': currentWrite == 6}" :style="{'background': currentRgb}">跑马灯</span>
                    <span @click="espFun(7)" class="flex flex-ac flex-jcc text-info"
                          :class="{'active': currentWrite == 7}" :style="{'background': currentRgb}">流光</span>
                    <span @click="snakeFun(8)" class="flex flex-ac flex-jcc text-info"
                          :class="{'active': currentWrite == 8}" :style="{'background': currentRgb}">贪吃蛇</span>
                    <span @click="squareFun(9)" class="flex flex-ac flex-jcc text-info"
                          :class="{'active': currentWrite == 9}" :style="{'background': currentRgb}">方块</span>
                    <span @click="clearWriting" class="flex flex-ac flex-jcc text-info"
                           :style="{'background': currentRgb}">清除</span>
                </div>
            </div>
        </div>
    </div>
</transition>